<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-form :inline="true" label-width="80px">
        <el-form-item label="查询">
          <el-input
            v-model="queryParams['user.mobile']"
            placeholder="用户昵称/手机号码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户端">
          <el-select style="width:100px;" @keyup.enter.native="handleQuery" v-model="queryParams['user.role']" placeholder="不限"
                     clearable
                     size="small">
            <el-option
              v-for="dict in roleOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-select @keyup.enter.native="handleQuery" v-model="queryParams.signType" placeholder="不限"
                     clearable
                     size="small">
            <el-option
              v-for="dict in coinOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="daterange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>


      </el-form>

      <el-table v-loading="loading" :data="postList">
        <el-table-column label="用户编号" align="center" prop="user.idNo"/>
        <el-table-column label="用户昵称" align="center" prop="user.nickname">
          <template slot-scope="scope">
            <el-link title="查看详情" type="primary"
                     @click="handleUserInfo({userId:scope.row.userId,role:scope.row.user.role})">{{scope.row.user.nickname}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="客户端" align="center" prop="user.role" :formatter="typeFormat"/>
        <el-table-column label="手机号码" align="center" prop="user.mobile"/>
        <el-table-column label="签到时间" align="center" prop="signTime"/>
        <el-table-column label="类型" align="center" prop="signType" :formatter="typeFormat"/>
        <el-table-column label="意豆" align="center" prop="integral"/>
        <el-table-column label="创建时间" align="center" prop="createtime"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <UserInfo :show="userInfoShow" @close="handleUserInfoClose" v-if="userItem" :item="userItem"></UserInfo>
    </div>
  </Tab>

</template>

<script>
  import Tab from "@/components/Tab";
  import {signinList} from "@/api/coin/signin";
  import UserInfo from '@/views/components/user';
  import mixin from '@/views/components/user/mixin';

  export default {
    mixins: [mixin],
    components: {Tab,UserInfo},
    data() {
      return {
        row: undefined,
        open: false,
        loading: false,
        daterange: undefined,
        postList: [],
        roleOptions: [],
        coinOptions: [],
        current: 'index',
        tabs: [
          {index: 'index', name: ''}
        ],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          "user.mobile": undefined,
          "user.role": undefined,
          signType: undefined
        }
      }
    },
    created() {
      this.getDicts("yy_user_role").then(response => {
        this.roleOptions = response.data;
      });
      this.getDicts("yy_coin_type").then(response => {
        this.coinOptions = response.data;
      });
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        signinList(this.queryDateRange(this.queryParams, this.daterange)).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      typeFormat(row, column) {
        let option;
        console.log(row);
        let property='';
        if (column.property === 'user.role') {
          option = this.roleOptions;
          if( row['user']){
            property = row['user']['role'];
          }
        } else if (column.property === 'signType') {
          option = this.coinOptions;
          property = row[column.property];
        }
        return this.selectDictLabel(option, property);
      },
      goBack(message) {
        this.current = 'index';
        this.getList();
      }
    }
  }
</script>

<style>

</style>
